<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      * {
        font-size: 18px;
        margin-top: 5px;
      }
    </style>
    <title></title>
  </head>
  <body>
    <div id="app">
      <table cellspacing="0" border="1">
        <tr>
          <th>选择</th>
          <th>编号</th>
          <th>商品</th>
          <th>价格</th>
        </tr>

        <tr v-for="item in arr" :key="item.id">
          <td>
            <input
              type="checkbox"
              name=""
              id=""
              :value="item.id"
              v-model="check"
            />
          </td>
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.price}}</td>
        </tr>
      </table>

      <br />
      总价为：<span>{{sum}}</span>
    </div>
    <script src="./vue.js"></script>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          check: [],
          arr: [
            { id: "1", name: "可乐", price: 18 },
            { id: "2", name: "薯片", price: 17 },
            { id: "3", name: "炸鸡", price: 15 },
            { id: "4", name: "苹果", price: 10 },
          ],  
        },
        methods: {},
        computed: {
          sum() {
            let sum=0
            console.log(this.check);
             this.arr.filter((item) => {
              return  this.check.includes(item.id)
            }).forEach(item => {
               sum+=item.price
            });
            return  sum+( sum>0?"元":"")
          },
        },
      });
    </script>
  </body>
</html>
